---
title: API
---

## PhotoProvider

| Name               | Description                                                                  | Type                                                                       | Default Value                            |
| ------------------ | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------- |
| children           |                                                                              | React.ReactNode                                                            | Required\*                               |
| onIndexChange      |                                                                              | (index: number, state: PhotoProviderState) =&gt; void                      |
| onVisibleChange    |                                                                              | (visible: boolean, index: number, state: PhotoProviderState) =&gt; void    |
| loop               | Whether to cycle the preview, when the number is reached, it will be enabled | boolean \| number                                                          | 3                                        |
| speed              | animation speed                                                              | (type: ActiveAnimationType) =>number                                       | () => 400                                |
| easing             | animation function                                                           | (type: ActiveAnimationType) =>string                                       | () => 'cubic-bezier(0.25, 0.8, 0.25, 1)' |
| photoClosable      | Can the image be clicked to close                                            | boolean                                                                    |
| maskClosable       | Whether the background click can be closed                                   | boolean                                                                    | true                                     |
| maskOpacity        | Default background transparency                                              | number \| null                                                             | 1                                        |
| pullClosable       | Whether the drop down can be closed                                          | boolean                                                                    | true                                     |
| bannerVisible      | Navigation bar visible                                                       | boolean                                                                    | true                                     |
| overlayRender      | Custom render overlays                                                       | \(overlayProps: OverlayRenderProps\) =&gt; React\.ReactNode                |
| toolbarRender      | Customize the rendering toolbar                                              | \(overlayProps: OverlayRenderProps\) =&gt; React\.ReactNode                |
| className          |                                                                              | string                                                                     |
| maskClassName      |                                                                              | string                                                                     |
| photoWrapClassName |                                                                              | string                                                                     |
| photoClassName     |                                                                              | string                                                                     |
| loadingElement     | Custom loading                                                               | JSX\.Element                                                               |
| brokenElement      | Custom loading failed rendering                                              | JSX\.Element \| \(\(photoProps: BrokenElementParams\) =&gt; JSX\.Element\) |
| portalContainer    | Custom portal target (e.g. for usage in web components)                      | HTMLElement                                                                | document.body                            |

## PhotoView

| Name     | Description                                          | Type                                                | Default Value |
| -------- | ---------------------------------------------------- | --------------------------------------------------- | ------------- |
| src      | Image src                                            | string                                              |
| render   | Custom rendering, lower priority than src            | \(props: PhotoRenderParams\) =&gt; React\.ReactNode |
| overlay  | Overlay                                              | React\.ReactNode                                    |
| width    | Custom render node width                             | number                                              |
| height   | Custom render node height                            | number                                              |
| children | Child nodes, usually thumbnails                      | React\.ReactElement                                 |
| triggers | The trigger mode which executes opening image action | Array\<\"onClick\" \| \"onDoubleClick\"\>           | [\"onClick\"] |

## DataType

| Name      | Description                               | Type                                                | Default Value |
| --------- | ----------------------------------------- | --------------------------------------------------- | ------------- |
| key       | Uniquely identifies                       | number \| string                                    | Required\*    |
| src       | RESOURCE ADDRESS                          | string                                              |
| render    | Custom rendering, lower priority than src | \(props: PhotoRenderParams\) =&gt; React\.ReactNode |
| overlay   | Overlay                                   | React\.ReactNode                                    |
| width     | Custom render node width                  | number                                              |
| height    | Custom render node height                 | number                                              |
| originRef | TRIGGER REF                               | React\.MutableRefObject&lt;HTMLElement \| null&gt;  |

## OverlayRenderProps

| Name           | Description             | Type                                                        | Default Value |
| -------------- | ----------------------- | ----------------------------------------------------------- | ------------- |
| images         | Picture list            | DataType\[\]                                                | Required\*    |
| index          | CURRENT INDEX           | number                                                      | Required\*    |
| onIndexChange  | Index change callbak    | \(index: number\) =&gt; void                                | Required\*    |
| visible        | Is it visible           | boolean                                                     | Required\*    |
| onClose        | close event callback    | \(evt?: React\.MouseEvent \| React\.TouchEvent\) =&gt; void | Required\*    |
| overlayVisible | Is the covering visible | boolean                                                     | Required\*    |
| overlay        | Overlay                 | React\.ReactNode                                            | Required\*    |
| rotate         | Current rotation angle  | number                                                      | Required\*    |
| onRotate       | Rotation event callback | \(rotate: number\) =&gt; void                               | Required\*    |
| scale          | Current zoom            | number                                                      | Required\*    |
| onScale        | Zoom event callback     | \(scale: number\) =&gt; void                                | Required\*    |
